<!--
 * @Descripttion: 
 * @version: 
 * @Author: dudu
 * @Date: 2020-02-18 09:53:54
 * @LastEditors: dudu
 * @LastEditTime: 2020-09-25 14:28:50
 -->
<template>
  <div class="home">
    <div class="tableArea">
      200行6000列表格渲染，edit列可排序，单击编辑，square列动态关联
      <!-- <el-button @click="handlePrintData">打印数据</el-button> -->
      <div>
        <ux-grid
          ref="plxTable"
          @edit-closed="handleEditLinkage"
          @cell-click="handleCellClick"
          :cell-class-name="calcStyleName"
          show-overflow
          :height="height"
          :edit-config="{ trigger: 'click', mode: 'cell' }"
          @table-body-scroll="scroll"
          show-header-overflow="ellipsis"
        >
          <ux-table-column type="index" title="序号" fixed="left" width="100" />
          <ux-table-column
            v-for="(item, index) in tableHeaders"
            :resizable="true"
            :edit-render="item.editable"
            :show-overflow-tooltip="true"
            :sortable="item.sortable"
            :fixed="item.fixed"
            min-width="100"
            :key="index"
            :field="item.name"
            :title="item.label"
          >
            <template v-slot:edit="scope">
              <el-input v-model="scope.row[item.name]"></el-input>
            </template>
          </ux-table-column>
        </ux-grid>
        <div>
          选中项
          {{ selectedMap }}
        </div>
        <div>键盘事件{{ keyMap }}</div>
        <div>区域选中{{ shiftSelect }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
export default {
  name: "home",
  data() {
    return {
      rowHeight: 20,
      height: 400,
      tableHeaders: [
        // { name: "grade", label: "年级" },
        // { name: "class", label: "班级" },
        // { name: "group", label: "小组" },
        // { name: "name", label: "姓名" }
      ],
      tableData: [],
      selectedMap: {},
      keyMap: {},
      shiftSelect: {},
    };
  },
  methods: {
    scroll({ scrollTop, scrollLeft }) {
      this.scrollTop = scrollTop;
      this.$refs.plxTable.doLayout();
    },
    handleEditLinkage({
      row,
      rowIndex,
      $rowIndex,
      column,
      columnIndex,
      $columnIndex,
    }) {
      if (columnIndex === 1) {
        row.square = row.edit * row.edit;
        this.$refs.plxTable.reloadRow(row, null, null);
      }
    },
    // setData (num) {
    //   this.datas = Array.from({ length: num }, (_, idx) => ({
    //     id: idx + 1,
    //     name: 'pl' + idx,
    //     sex: idx,
    //     describe: '欢迎使用plx' + idx
    //   }))
    //   this.$refs.plxTable.reloadData(this.datas)
    //   // 默认是数据变化滚动到顶部，这里需要手动滚动之前位置
    //   if (this.radio === 2) {
    //     this.$refs.plxTable.pagingScrollTopLeft(this.scrollTop)
    //   }
    // },
    handlePrintData() {
      console.log(this.tableData[0].edit);
    },
    handleCellClick(row, column, cell, event) {
      event.stopPropagation();
      if (this.keyMap.ctrl) {
        this.$set(
          this.selectedMap,
          `${row.edit}-${column.property}`,
          !this.selectedMap[`${row.edit}-${column.property}`]
        );
      } else if (this.keyMap.shift) {
        let rowIndex = +row.edit;
        let columnIndex =
          this.tableHeaders.map((item) => item.name).indexOf(column.property) +
          1;
        if (!this.shiftSelect.start) {
          this.shiftSelect.start = { rowIndex, columnIndex };
        } else {
          this.shiftSelect.end = { rowIndex, columnIndex };
          // console.log("设置区域选中", this.shiftSelect, row, column);
          let minRow = Math.min(
            this.shiftSelect.start.rowIndex,
            this.shiftSelect.end.rowIndex
          );
          let maxRow = Math.max(
            this.shiftSelect.start.rowIndex,
            this.shiftSelect.end.rowIndex
          );
          let minCol = Math.min(
            this.shiftSelect.start.columnIndex,
            this.shiftSelect.end.columnIndex
          );
          let maxCol = Math.max(
            this.shiftSelect.start.columnIndex,
            this.shiftSelect.end.columnIndex
          );
          // console.log(minRow, maxRow, minCol, maxCol);
          this.selectedMap = {};
          for (let i = minRow; i <= maxRow; i++) {
            for (let j = minCol; j <= maxCol; j++) {
              // console.log(i, j);
              this.$set(
                this.selectedMap,
                `${i}-${this.tableHeaders[j - 1].name}`,
                true
              );
            }
          }
        }
      } else {
        this.selectedMap = {};
        this.shiftSelect = {};
      }
    },
    calcStyleName({ row, column, rowIndex, columnIndex }) {
      if (this.selectedMap[`${row.edit}-${column.property}`]) {
        return "selected";
      }
      return "";
    },
  },
  mounted() {
    // 初始化表数据
    const list = {
      edit: 1,
      square: 1,
      requestId: null,
      pageNo: null,
      pageSize: null,
      tableName: null,
      field: null,
      fields: null,
      values: null,
      userName: null,
      wbRight: null,
      sequence: 0,
      id1: "AFF7AB0BA97634DDE05480C16E988EF4",
      id2: "AFF7AB0BB08934DDE05480C16E988EF4",
      fromId: null,
      plant: "A5-1",
      pkgType: "LGA",
      prodSize: "3X4.2",
      pkgTypes: null,
      pkg: "LGA 3X4.2X0.95 14",
      pkgs: null,
      pid: "A160920_1002",
      bd: "BD-AFJS5691206-DW",
      cusName: "展讯通信（上海）有限公司",
      cusCode: "AFJ",
      lotType: "M-PP",
      lotTypes: null,
      orderType: "SMT+TK",
      ct: 32.66,
      ratio: null,
      sumPlanQty: 73.12,
      sumEqpQty: 4.0,
      create_Date: null,
      create_date: null,
      updateDate: null,
      updateByP: null,
      recordCounts: 1,
      region: "基板二处",
      custDevice: "160920_10",
      tooling_no: null,
      tooling_total: null,
      vpid: "V-160920_10-K003",
      step: "WB",
      indexFlag: "Y",
      lastStep: "Y",
      cusCodes: null,
      feCt: 32.66,
      leftFeCt: null,
      ttl: null,
      day1: null,
      day2: null,
      day3: null,
      day4: null,
      day5: null,
      day6: null,
      day7: null,
      day8: null,
      day9: null,
      day10: null,
      day11: null,
      day12: null,
      day13: null,
      day14: null,
      day15: null,
      name1: null,
      name2: null,
      name3: null,
      name4: null,
      name5: null,
      name6: null,
      name7: null,
      name8: null,
      name9: null,
      name10: null,
      name11: null,
      name12: null,
      color: 0,
      planPerDays: 0,
      hes_bj820: null,
      hes_bj855: null,
      iconn: 4.0,
      iconn_LA: null,
      iconn_Plus: null,
      iconn_JBOAT: null,
      maxum_Elite: null,
      maxum_Ultra: null,
      uphHes_bj820: null,
      uphHes_bj855: null,
      uphIconn: 819.0,
      uphIconn_LA: null,
      uphIconn_Plus: 908.0,
      uphIconn_JBOAT: null,
      uphMaxum_Elite: null,
      uphMaxum_Ultra: 704.0,
      someDay: "2020-09-24T02:32:09.000+0000",
      createDateS: null,
      updateDateS: null,
      createByS: null,
      updateByS: null,
      updateFlag: null,
      toUpdateInfo: null,
      dates: null,
      someDayStr: "2020-09-24 10:32:09",
      startDate: null,
      endDate: null,
      sumwip: 2387761.0,
      unissue: null,
      tp: null,
      bg: null,
      bgi: null,
      uv1: null,
      dt: null,
      wm: null,
      wc: null,
      ds: null,
      wls: null,
      uv2: null,
      ws2m: null,
      qs: null,
      qwp: null,
      wpk: null,
      bp: null,
      sc: null,
      spb: null,
      spb2: null,
      sm: null,
      sfc: null,
      sdf: null,
      smv: null,
      qsmv: null,
      sss: null,
      ssp: null,
      qsp: null,
      smtfg: null,
      fp: null,
      fc: null,
      fc2: null,
      fc3: null,
      fc4: null,
      fc5: null,
      fc6: null,
      fcr: null,
      fdf: null,
      fi: null,
      fpb: null,
      upb: null,
      up: null,
      uf: null,
      uc: null,
      ui: null,
      qfc: null,
      tpl: null,
      tc: null,
      tci: null,
      qtc: null,
      nc: null,
      cr: null,
      fctotal: null,
      dp: null,
      dp2: null,
      dp3: null,
      dp4: null,
      dp5: null,
      dp6: null,
      db: 1183944.0,
      db2: 322773.0,
      db3: null,
      db4: null,
      db5: null,
      db6: null,
      db7: null,
      db8: null,
      ec: 82905.0,
      ec2: 29493.0,
      ec3: null,
      ec4: null,
      ec5: null,
      ec6: null,
      ec7: null,
      ec8: null,
      wp: 642665.0,
      wp2: null,
      wp3: null,
      wb: 51262.0,
      wb2: null,
      wb3: null,
      wb4: null,
      wb5: null,
      wb6: null,
      wos: null,
      wb3m1: 74719.0,
      wb3m2: null,
      wb3m3: null,
      qw: null,
      qw2: null,
      qw3: null,
      posttape: null,
      fetotal: 2387761.0,
      hs: null,
      hsc: null,
    };
    const keys = Object.keys(list);
    this.tableHeaders = keys.map((key) => ({
      name: key,
      label: key,
      sortable: key === "edit",
      editable: ["edit", "id1"].includes(key),
    }));
    for (let i = 0; i < 60; i++) {
      this.tableData.push({
        ...list,
        sort: Math.random() * 100,
        edit: i + "",
        square: null,
      });
    }

    this.$refs.plxTable.reloadData(this.tableData);

    document.onkeydown = (e) => {
      e = e || window.event;
      e.preventDefault();
      let keycode = e.keyCode;
      // console.log("键盘按下", keycode);
      switch (keycode) {
        case 17:
          this.$set(this.keyMap, "ctrl", true);
          break;
        case 16:
          this.$set(this.keyMap, "shift", true);
          break;
      }
    };

    document.onkeyup = (e) => {
      e = e || window.event;
      e.preventDefault();
      // console.log("键盘抬起", keycode);
      this.keyMap = {};
    };

    document.onclick = (e) => {
      this.selectedMap = {};
      this.shiftSelect = {};
    };
    // 优化shift过程选中文本
    document.onselectstart = (e) => {
      return !this.keyMap.shift;
    };
  },
};
</script>
<style>
.tableArea {
  padding: 20px;
  
}
.tableArea > div {
  width: 100%;
}
.selected {
  border: 1px solid #409eff;
}
</style>
